<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24">
            <el-form-item label="用户姓名">
              <el-input v-model="page.userName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="手机号码">
              <el-input v-model="page.userPhone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="邮箱">
              <el-input v-model="page.email"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="反馈类型">
              <el-select style="width: 100%;" v-model="page.type" clearable>
                <el-option v-for="item in feedbackType" :key="item.value" :value="item.value"
                           :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="处理状态">
              <el-select style="width: 100%;" v-model="page.status" clearable>
                <el-option label="未处理" :value="0"></el-option>
                <el-option label="已处理" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="贷超APP">
              <el-select v-model="page.appId" style="width: 100%" clearable>
                <el-option v-for="item in productList" :key="item.appId" :label="item.appName"
                           :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <Table :tableColumn="tableColumn" :tableData="tableData" :page="page"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
    >
      <template #img="{row}">
        <el-image style="width: 80px;height: 80px;margin-right: 10px" v-if="row.imgFirst" :src="row.imgFirst"
                  :preview-src-list="[row.imgFirst]"></el-image>
        <!--        <el-image style="width: 80px;height: 80px;margin-right: 10px" v-if="row.imgSecond" :src="row.imgSecond" :preview-src-list="[row.imgSecond]"></el-image>-->
        <!--        <el-image style="width: 80px;height: 80px;margin-right: 10px" v-if="row.imgThird" :src="row.imgThird" :preview-src-list="[row.imgThird]"></el-image>-->
      </template>
      <template #status="{row}">
        {{ row.status === 1 ? '已处理' : '未处理' }}
      </template>
      <template #remark="{row}">
        <el-tooltip :content="row.remark">
          <span style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{ row.remark }}</span>
        </el-tooltip>
      </template>
      <template #handle="{row}">
        <el-button type="text" v-permiss="['list-details']" @click="lookDetails(row)">查看详情</el-button>
      </template>
    </Table>
    <Dialog v-model="visible" @cancel="visible = false" title="查看详情" @close="detailsForm = {}"
            @confirm="feedbackConfirm">
      <el-form label-width="80px">
        <el-form-item label="用户姓名">
          {{ detailsForm.userName }}
        </el-form-item>
        <el-form-item label="手机号码">
          {{ detailsForm.userPhone }}
        </el-form-item>
        <el-form-item label="邮箱">
          {{ detailsForm.email }}
        </el-form-item>
        <el-form-item label="反馈类型">
          {{ detailsForm.type }}
        </el-form-item>
        <el-form-item label="反馈内容">
          {{ detailsForm.remark }}
        </el-form-item>
        <el-form-item label="图片">
          <el-image style="width: 120px;height: 120px;margin-right: 10px" v-if="detailsForm.imgFirst"
                    :src="detailsForm.imgFirst"
                    :preview-src-list="[detailsForm.imgFirst]"></el-image>
          <el-image style="width: 120px;height: 120px;margin-right: 10px" v-if="detailsForm.imgSecond"
                    :src="detailsForm.imgSecond"
                    :preview-src-list="[detailsForm.imgSecond]"></el-image>
          <el-image style="width: 120px;height: 120px;margin-right: 10px" v-if="detailsForm.imgThird"
                    :src="detailsForm.imgThird"
                    :preview-src-list="[detailsForm.imgThird]"></el-image>
        </el-form-item>
        <el-form-item label="反馈时间">
          {{ detailsForm.createTime }}
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="5" v-model="detailsForm.reply"/>
        </el-form-item>
      </el-form>
    </Dialog>
  </el-card>
</template>

<script>
import {reactive, toRefs, onMounted} from "vue";
import {fetchFeedbackList, updateFeedback} from '@/api/user'
import {ElMessage} from "element-plus";
import {selectProductList} from "@/api";

const tableColumn = [
  {label: '贷超APP', prop: 'appName', align: 'center', minWidth: 100},
  {label: '用户姓名', align: 'center', prop: 'userName', minWidth: 150},
  {label: '手机号码', align: 'center', prop: 'userPhone', minWidth: 150},
  {label: '邮箱', align: 'center', prop: 'email', minWidth: 150},
  {label: '反馈类型', align: 'center', prop: 'type', minWidth: 150},
  {label: '反馈内容', align: 'center', prop: 'remark', slot: 'remark', minWidth: 250},
  {label: '图片', align: 'center', prop: 'img', slot: 'img', minWidth: 100},
  {label: '反馈时间', align: 'center', prop: 'createTime', minWidth: 150},
  {label: '处理状态', align: 'center', prop: 'status', slot: 'status', minWidth: 150},
  {label: '处理人', align: 'center', prop: 'disposeName', minWidth: 150},
  {label: '处理时间', align: 'center', prop: 'updateTime', minWidth: 150},
  {label: '备注', align: 'center', prop: 'reply', minWidth: 150},
  {label: '操作', align: 'center', prop: 'handle', slot: 'handle', fixed: 'right', minWidth: 150},
]
const feedbackType = [
  {label: '提个建议', value: 0},
  {label: '不好用', value: 1},
  {label: '出错误啦', value: 2},
  {label: '其他', value: 3},
]
export default {
  name: "UserFeedback",
  setup() {
    const state = reactive({
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      detailsForm: {},
      visible: false,
      productList: []
    })
    const getTableData = async () => {
      const res = await fetchFeedbackList(state.page)
      if (res.code === 200) {
        const {list, total} = res.data
        state.tableData = list.map(item => {
          const type = feedbackType.find(i => i.value === item.type)
          item.type = type ? type.label : item.type
          return item
        })
        state.page.total = total
      }
    }
    const resetSearch = () => {
      state.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      getTableData()
    }
    const lookDetails = (row) => {
      state.detailsForm = {...row}
      state.visible = true
    }
    const feedbackConfirm = async () => {
      const {id, reply} = state.detailsForm
      const res = await updateFeedback({
        id, reply, status: 1
      })
      if (res.code === 200) {
        ElMessage.success('回复成功')
        state.visible = false
        getTableData()
      }

    }
    function getSelect() {
      selectProductList().then(res => {
        if (res.code === 200) {
          state.productList = res.data
        }
      })
    }
    onMounted(() => {
      getTableData()
      getSelect()
    })
    return {
      resetSearch,
      getTableData,
      tableColumn,
      feedbackType,
      lookDetails,
      feedbackConfirm,
      ...toRefs(state)
    }
  }
}

</script>

<style scoped>

</style>
